<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{title}}</title>
    <script type="text/javascript">
        LAM.run(function(){
            'use strict';
            var System=this;
            System.Loader
                    .load({
                        'baseUrl':System.PLUGINS,
                        'suffix':'.css',
                        'rel':'stylesheet',
                        'css':[
                            '/bootstrap/bootstrap'
                        ]
                    }).print();

            System
                    .import(['/artTemplate/artTemplate'],System.PLUGINS)
                    .import(['/Pagination.class'],System.SCRIPT)
            ;
        });
    </script>
    <style type="text/css">
        .pagination li a.active{
            color: #2a6496;
            background-color: #eee;
            border-color: #ddd;
        }
    </style>
</head>
<body class="container-fluid">

<ul class="list-group"></ul>
<nav aria-label="Page navigation">
    <ul class="pagination"></ul>
</nav>

<script type="text/template" id="list:tp">
    <li class="list-group-item active" style="margin-top: 10px;"><%=title%></li>
    <% for(var i=0,length =data.length; i < end && start < length;i++,start++){%>
    <li class="list-group-item"><%=data[start]['code']%> .<%=data[start]['name']%></li>
    <% }%>
</script>
<script type="text/template" id="pagination:tp">
    <li>
        <a href="javascript:void(0);" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
        </a>
    </li>
    <% for(var i=1;i<= num;i++){%>
    <% if(1 === i){%>
    <li><a href="javascript:void(0);" aria-label="li" class="active" data-num="<%=i%>"><%=i%></a></li>
    <% }else{%>
    <li><a href="javascript:void(0);" aria-label="li" data-num="<%=i%>"><%=i%></a></li>
    <% }%>
    <% }%>
    <li>
        <a href="javascript:void(0);" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
        </a>
    </li>
</script>

</body>
<script type="text/javascript">
    (function($){
        var DATA =[];
        var TOTAL_NUM= 0,row_num= 20,pagination_num= 0,current_num= 1,title="";
        function init(){
            TOTAL_NUM = DATA.length;
            pagination_num = Math.ceil(TOTAL_NUM / row_num);
        }
        function setList(num){//设置数据
            var start = (num-1) * row_num;
//            console.log(start,'---',row_num);
            $('.list-group').html(template('list:tp',{
                'data':DATA,
                'title':title,
                'end':row_num,
                'start':start
            }));
        }
        function setPagination(num){//设置分页
            $('.pagination').html(template('pagination:tp',{'num':num}));
            setList(current_num);
        }

        function removeClass($current){
//            console.log(current_num);
            $('[aria-label="li"]').removeClass('active');
            if($current){
                $current.eq(current_num-1).addClass('active');
            }
        }
        $.get("{{LAM.ROOT}}/json/data_3.json",function(D){//初始化数据
            DATA  = D.data;
            title = D.title;
            init();
            $(function(){
                setPagination(pagination_num);
                $('[aria-label="Previous"]').on('click',function(){
                    current_num = current_num-1;
                    if(!(current_num > 0)){
                        current_num = 1;
                    }
                    removeClass($('[aria-label="li"]'));
                    setList(current_num);
                });
                $('[aria-label="Next"]').on('click',function(){
                    current_num = current_num+1;
                    if(!(current_num < pagination_num)){
                        current_num = pagination_num;
                    }
                    removeClass($('[aria-label="li"]'));
                    setList(current_num);

                });
                $('[aria-label="li"]').on('click',function(){
                    removeClass();
                    current_num = parseInt($(this).data('num'));
                    setList(current_num);

                });

            });
        },'json');
    })(jQuery);

</script>
</html>